<script setup>
import { RouterView } from 'vue-router'
import { onMounted, ref } from 'vue';
import useUser from './store/user';
import useMenu from './store/menu';
import axios from 'axios';
import login from './views/Login.vue'
import { routerImports } from './router'
import { ElMessage } from 'element-plus'

import {
  Check, ArrowRight, ArrowLeft, DocumentChecked, ArrowDown, Coin
} from '@element-plus/icons-vue'

const user = useUser();
const menu = useMenu();


const isCollapse = ref(false);

function collapsebutton() {
  isCollapse.value = !isCollapse.value;
}

const outLogin = () => {
  user.logout();
};





const obj = ref({
  password: null,
  pwd2: null
})

const showDialog = ref(false);
const updatePwd = () => {
  showDialog.value = true;
}
const submitData = () => {
  if (obj.value.password != obj.value.pwd2) {
    ElMessage.error("两次密码不一致!");
  } else {
    axios({
      method: "PATCH",
      url: "/api/employee/updatePwd",
      data: obj.value
    }).then((resp) => {
      if (resp.data.code === 200) {
        showDialog.value = false;
        getList();
      } else {
        ElMessage.error(resp.data.msg);
        console.log("出现逻辑异常:", resp);
      }
    }).catch((e) => {
      console.log("出现异常:", e);
    });

  }

};
</script>

<template>
  <login v-if="!user.isLogin"></login>
  <div v-else class="body">
    <div class="menu">
      <el-scrollbar max-height="100vh">
        <el-menu router default-active="/" class="el-menu-vertical-demo item" :collapse="isCollapse"
          active-text-color="#ffd04b" background-color="#545c64" text-color="#fff">
          <template v-for="item in menu.menu" :key="item.name">
            <el-sub-menu v-if="item.children" :index="item.path">
              <template #title>
                <el-icon>
                  <DocumentChecked />
                </el-icon>
                <span>{{ item.vName }}</span>
              </template>

              <template v-for="item2 in item.children" :key="item2.name">
                <el-sub-menu v-if="item2.children" :index="item2.path">
                  <template #title>
                    <el-icon>
                      <Check />
                    </el-icon>
                    <span>{{ item2.vName }}</span>
                  </template>
                  <el-menu-item v-for="ii2 in item2.children" :key="ii2.name" :index="ii2.path">
                    {{ ii2.vName }}
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="item2.path">{{ item2.vName }}</el-menu-item>
              </template>

            </el-sub-menu>
            <el-menu-item v-else :index="item.path"><el-icon>
                <Coin />
              </el-icon><span>{{ item.vName }}</span>
            </el-menu-item>
          </template>

        </el-menu>
      </el-scrollbar>
    </div>

    <div class="collapse" @click="collapsebutton">
      <el-icon v-if="isCollapse" style="cursor: pointer;">
        <ArrowRight />
      </el-icon>
      <el-icon v-else style="cursor: pointer;">
        <ArrowLeft />
      </el-icon>
    </div>

    <main class="view">

      <header class="header">
        <div class="title">
          <h3>人力资源管理系统</h3>
        </div>


        <div class="headicon">
          <div>
            <el-avatar> user </el-avatar>
          </div>

          <div class="dropdown">
            <el-dropdown>
              <el-button type="primary">
                员工:{{ user.num }}<el-icon><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="outLogin">退出</el-dropdown-item>
                  <el-dropdown-item @click="updatePwd">修改密码</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

        </div>
      </header>

      <el-dialog v-model="showDialog">
        <div>
          <span>新密码:</span>
          <el-input v-model="obj.password" type="password"></el-input>
        </div>
        <div>
          <span>确认密码:</span>
          <el-input v-model="obj.pwd2" type="password"></el-input>
        </div>
        <button @click="submitData">提交</button>
      </el-dialog>

      <div class="content">
        <RouterView></RouterView>
      </div>

    </main>
  </div>
</template>

<style scoped>
.body {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.headicon {
  display: flex;
  flex-direction: row;
}

.dropdown {
  align-self: center;
  justify-content: center;
}

.menu {
  display: flex;
  flex-direction: column;
  background-color: rgb(84, 92, 100);
}

.item li {
  width: 170px;
}

.collapse {
  align-self: center;
  /* border: red 1px solid; */
  margin-left: -5px;
  z-index: 100;
  height: 100%;
  width: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-x: hidden;
}

.header {
  /* flex: 0 0 auto; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 7vh;
  align-items: center;
}

.content {
  flex: 1 1 auto;
}
</style>
